<div class="container-fluid container-cards-pf">
    <div class="row row-cards-pf">

        <div class="col-xs-12 col-sm-4 col-md-4" *ngFor="let api of apis">
            <div class="card-pf card-pf-accented card-pf-aggregate-status api-card" [class.active]="isSelected(api)" (click)="toggleApiSelected(api)">
                <h2 [title]="apiIconTitle(api)" class="api-card-title">
                    <span [class.oai2-icon16]="isOpenApi20(api)"
                          [class.oai3-icon16]="isOpenApi30(api)"
                          [class.graphql-icon16]="isGraphQL(api)"
                          [class.aai2-icon16]="isAsyncApi20(api)"><a [routerLink]="[api.id]">{{ api.name }}</a></span>
                </h2>
                <div class="card-pf-body">
                    <hr/>
                    <tag-list [tags]="api.tags" (tagSelected)="selectTag($event)"></tag-list>
                    <p class="api-description">
                        <markdown-summary [data]="api.description" emptyText="No description available."></markdown-summary>
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>
